<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex弹性布局布局用于替换float浮动布局</title>
    <style>
      .box {
        /* height: 50px; */
        /* width: 200px; */
        /* 本元素在父元素flex布局方向上的长度 */
        flex-basis: 200px;
        background-color: pink;
        border: solid 1px black;
        text-align: center;
      }
      #main {
        height: 500px;
        border: solid 1px aqua;
        /* flex布局会影响子元素的布局方式。块元素不再独占一行，宽高取决于内容(flex-direction/align-items不能少) */
        display: flex;
        /* flex-direction设置布局方向
        *row左到右 默认
        *row-reverse右到左
        *column从上到下
        *column-reverse从下到上
        */
        flex-direction: row;
        /* justify-content 设置子元素在布局方向上的对齐方式
        *flex-start开始位置
        *flex-end结束位置
        *center居中
        *space-around间距平分2n份
        *space-between元素贴边平分n-1份
        *space-evenly间距评分n+1份
        */
        justify-content: space-evenly;
        /* align-items 设置元素在垂直于布局方向的对其方式 */
        align-items: center;
      }
    </style>
  </head>
  <body>
    <!-- flex弹性布局布局用于替换float浮动布局 -->
    <!-- section区域，文本区域 -->
    <section id="main">
      <div class="box">第1块</div>
      <div class="box">第2块</div>
      <div class="box">第3块</div>
    </section>
  </body>
</html>
